<template>
  <div class="chart-container">
    <el-table :data="tableData" style="width: 100%"   :span-method="objectSpanMethod">
      <el-table-column prop="pU_NO" label="产区"></el-table-column>

      <el-table-column prop="organizatioN_TIER3" label="部门"></el-table-column>
      <el-table-column prop="regioN_NAME" label="段别"></el-table-column>

      <el-table-column prop="yD_NUM" label="应道"></el-table-column>
      <el-table-column prop="sD_NUM" label="实到"></el-table-column>

      <el-table-column prop="absent" label="缺勤"></el-table-column>


    </el-table>

    <!-- <button @click="getTableDataFm">点击</button> -->
  </div>
</template>

<script>
export default {
  name: "demoTwo",
  filters: {},
  data() {
    return {
        spanArr: [],//用于存放每一行记录的合并数
        pos:0, 
      tableData: []
    };
  },
  created() {},
  mounted() {
    //this.getList();
    //
    let res = {
      retCode: "OK",
      errCode: null,
      errMsg: null,
      data: [
        {
          organizatioN_TIER2: null,
          pU_NO: 'PU1',
          organizatioN_TIER3: "PD",
          regioN_NAME: "ASSY",
          yD_NUM: 436,
          sD_NUM: 0,
          kG_NUM: 0,
          sJ_NUM: 0,
          qT_NUM: 0,
          bJ_NUM: 0,
          cJ_NUM: 0,
          nJ_NUM: 0,
          xX_NUM: 0,
          dQ_NUM: 0,
          cQ_NUM: 436,
          cqdQ_NUM: 0,
          cqcQ_NUM: 0,
          bzbs: 0,
          bzrl: 0.0,
          xqrs: 0.0,
          mbxq: 0.0,
          gap1: 0.0,
          gap2: 0.0,
          cql: null,
          g: null
        },
        {
          organizatioN_TIER2: null,
          pU_NO: 'PU1',
          organizatioN_TIER3: "PD",
          regioN_NAME: "IPQC",
          yD_NUM: 172,
          sD_NUM: 0,
          kG_NUM: 0,
          sJ_NUM: 0,
          qT_NUM: 0,
          bJ_NUM: 0,
          cJ_NUM: 0,
          nJ_NUM: 0,
          xX_NUM: 0,
          dQ_NUM: 0,
          cQ_NUM: 172,
          cqdQ_NUM: 0,
          cqcQ_NUM: 0,
          bzbs: 0,
          bzrl: 0.0,
          xqrs: 0.0,
          mbxq: 0.0,
          gap1: 0.0,
          gap2: 0.0,
          cql: null,
          g: null
        },
        {
          organizatioN_TIER2: null,
          pU_NO: 'PU1',
          organizatioN_TIER3: "PD",
          regioN_NAME: "R/I",
          yD_NUM: 26,
          sD_NUM: 0,
          kG_NUM: 0,
          sJ_NUM: 0,
          qT_NUM: 0,
          bJ_NUM: 0,
          cJ_NUM: 0,
          nJ_NUM: 0,
          xX_NUM: 0,
          dQ_NUM: 0,
          cQ_NUM: 26,
          cqdQ_NUM: 0,
          cqcQ_NUM: 0,
          bzbs: 0,
          bzrl: 0.0,
          xqrs: 0.0,
          mbxq: 0.0,
          gap1: 0.0,
          gap2: 0.0,
          cql: null,
          g: null
        },
        {
          organizatioN_TIER2: null,
          pU_NO: 'PU1',
          organizatioN_TIER3: "PD",
          regioN_NAME: "PACK",
          yD_NUM: 139,
          sD_NUM: 0,
          kG_NUM: 0,
          sJ_NUM: 0,
          qT_NUM: 0,
          bJ_NUM: 0,
          cJ_NUM: 0,
          nJ_NUM: 0,
          xX_NUM: 0,
          dQ_NUM: 0,
          cQ_NUM: 139,
          cqdQ_NUM: 0,
          cqcQ_NUM: 0,
          bzbs: 0,
          bzrl: 0.0,
          xqrs: 0.0,
          mbxq: 0.0,
          gap1: 0.0,
          gap2: 0.0,
          cql: null,
          g: null
        },
        {
          organizatioN_TIER2: null,
          pU_NO: 'PU1',
          organizatioN_TIER3: "PD",
          regioN_NAME: "MTY",
          yD_NUM: 69,
          sD_NUM: 0,
          kG_NUM: 0,
          sJ_NUM: 0,
          qT_NUM: 0,
          bJ_NUM: 0,
          cJ_NUM: 0,
          nJ_NUM: 0,
          xX_NUM: 0,
          dQ_NUM: 0,
          cQ_NUM: 69,
          cqdQ_NUM: 0,
          cqcQ_NUM: 0,
          bzbs: 0,
          bzrl: 0.0,
          xqrs: 0.0,
          mbxq: 0.0,
          gap1: 0.0,
          gap2: 0.0,
          cql: null,
          g: null
        },
        {
          organizatioN_TIER2: null,
          pU_NO: 'PU1',
          organizatioN_TIER3: "PD",
          regioN_NAME: "入库",
          yD_NUM: 32,
          sD_NUM: 0,
          kG_NUM: 0,
          sJ_NUM: 0,
          qT_NUM: 0,
          bJ_NUM: 0,
          cJ_NUM: 0,
          nJ_NUM: 0,
          xX_NUM: 0,
          dQ_NUM: 0,
          cQ_NUM: 32,
          cqdQ_NUM: 0,
          cqcQ_NUM: 0,
          bzbs: 0,
          bzrl: 0.0,
          xqrs: 0.0,
          mbxq: 0.0,
          gap1: 0.0,
          gap2: 0.0,
          cql: null,
          g: null
        },
        {
          organizatioN_TIER2: null,
          pU_NO: 'PU1',
          organizatioN_TIER3: "PD",
          regioN_NAME: "OTHERS",
          yD_NUM: 13,
          sD_NUM: 0,
          kG_NUM: 0,
          sJ_NUM: 0,
          qT_NUM: 0,
          bJ_NUM: 0,
          cJ_NUM: 0,
          nJ_NUM: 0,
          xX_NUM: 0,
          dQ_NUM: 0,
          cQ_NUM: 13,
          cqdQ_NUM: 0,
          cqcQ_NUM: 0,
          bzbs: 0,
          bzrl: 0.0,
          xqrs: 0.0,
          mbxq: 0.0,
          gap1: 0.0,
          gap2: 0.0,
          cql: null,
          g: null
        },
        {
          organizatioN_TIER2: null,
          pU_NO: 'PU1',
          organizatioN_TIER3: "PD",
          regioN_NAME: "修护",
          yD_NUM: 7,
          sD_NUM: 0,
          kG_NUM: 0,
          sJ_NUM: 0,
          qT_NUM: 0,
          bJ_NUM: 0,
          cJ_NUM: 0,
          nJ_NUM: 0,
          xX_NUM: 0,
          dQ_NUM: 0,
          cQ_NUM: 7,
          cqdQ_NUM: 0,
          cqcQ_NUM: 0,
          bzbs: 0,
          bzrl: 0.0,
          xqrs: 0.0,
          mbxq: 0.0,
          gap1: 0.0,
          gap2: 0.0,
          cql: null,
          g: null
        },
        {
          organizatioN_TIER2: null,
          pU_NO: 'PU1',
          organizatioN_TIER3: "PD",
          regioN_NAME: "SUB",
          yD_NUM: 172,
          sD_NUM: 0,
          kG_NUM: 0,
          sJ_NUM: 0,
          qT_NUM: 0,
          bJ_NUM: 0,
          cJ_NUM: 0,
          nJ_NUM: 0,
          xX_NUM: 0,
          dQ_NUM: 0,
          cQ_NUM: 172,
          cqdQ_NUM: 0,
          cqcQ_NUM: 0,
          bzbs: 0,
          bzrl: 0.0,
          xqrs: 0.0,
          mbxq: 0.0,
          gap1: 0.0,
          gap2: 0.0,
          cql: null,
          g: null
        },
        {
          organizatioN_TIER2: null,
          pU_NO: 'PU1',
          organizatioN_TIER3: "工程",
          regioN_NAME: "程式",
          yD_NUM: 8,
          sD_NUM: 0,
          kG_NUM: 0,
          sJ_NUM: 0,
          qT_NUM: 0,
          bJ_NUM: 0,
          cJ_NUM: 0,
          nJ_NUM: 0,
          xX_NUM: 0,
          dQ_NUM: 0,
          cQ_NUM: 8,
          cqdQ_NUM: 0,
          cqcQ_NUM: 0,
          bzbs: 0,
          bzrl: 0.0,
          xqrs: 0.0,
          mbxq: 0.0,
          gap1: 0.0,
          gap2: 0.0,
          cql: null,
          g: null
        },
        {
          organizatioN_TIER2: null,
          pU_NO: 'PU1',
          organizatioN_TIER3: "工程",
          regioN_NAME: "设备",
          yD_NUM: 19,
          sD_NUM: 0,
          kG_NUM: 0,
          sJ_NUM: 0,
          qT_NUM: 0,
          bJ_NUM: 0,
          cJ_NUM: 0,
          nJ_NUM: 0,
          xX_NUM: 0,
          dQ_NUM: 0,
          cQ_NUM: 19,
          cqdQ_NUM: 0,
          cqcQ_NUM: 0,
          bzbs: 0,
          bzrl: 0.0,
          xqrs: 0.0,
          mbxq: 0.0,
          gap1: 0.0,
          gap2: 0.0,
          cql: null,
          g: null
        },
        {
          organizatioN_TIER2: null,
          pU_NO: 'PU1',
          organizatioN_TIER3: "工程",
          regioN_NAME: "PIE",
          yD_NUM: 3,
          sD_NUM: 0,
          kG_NUM: 0,
          sJ_NUM: 0,
          qT_NUM: 0,
          bJ_NUM: 0,
          cJ_NUM: 0,
          nJ_NUM: 0,
          xX_NUM: 0,
          dQ_NUM: 0,
          cQ_NUM: 3,
          cqdQ_NUM: 0,
          cqcQ_NUM: 0,
          bzbs: 0,
          bzrl: 0.0,
          xqrs: 0.0,
          mbxq: 0.0,
          gap1: 0.0,
          gap2: 0.0,
          cql: null,
          g: null
        },
        {
          organizatioN_TIER2: null,
          pU_NO: 'PU1',
          organizatioN_TIER3: "工程",
          regioN_NAME: "修护",
          yD_NUM: 79,
          sD_NUM: 0,
          kG_NUM: 0,
          sJ_NUM: 0,
          qT_NUM: 0,
          bJ_NUM: 0,
          cJ_NUM: 0,
          nJ_NUM: 0,
          xX_NUM: 0,
          dQ_NUM: 0,
          cQ_NUM: 79,
          cqdQ_NUM: 0,
          cqcQ_NUM: 0,
          bzbs: 0,
          bzrl: 0.0,
          xqrs: 0.0,
          mbxq: 0.0,
          gap1: 0.0,
          gap2: 0.0,
          cql: null,
          g: null
        },
        {
          organizatioN_TIER2: null,
          pU_NO: 'PU1',
          organizatioN_TIER3: "工程",
          regioN_NAME: "EE",
          yD_NUM: 12,
          sD_NUM: 0,
          kG_NUM: 0,
          sJ_NUM: 0,
          qT_NUM: 0,
          bJ_NUM: 0,
          cJ_NUM: 0,
          nJ_NUM: 0,
          xX_NUM: 0,
          dQ_NUM: 0,
          cQ_NUM: 12,
          cqdQ_NUM: 0,
          cqcQ_NUM: 0,
          bzbs: 0,
          bzrl: 0.0,
          xqrs: 0.0,
          mbxq: 0.0,
          gap1: 0.0,
          gap2: 0.0,
          cql: null,
          g: null
        },
        {
          organizatioN_TIER2: null,
          pU_NO: 'PU1',
          organizatioN_TIER3: "OTHERS",
          regioN_NAME: "PACK",
          yD_NUM: 1,
          sD_NUM: 0,
          kG_NUM: 0,
          sJ_NUM: 0,
          qT_NUM: 0,
          bJ_NUM: 0,
          cJ_NUM: 0,
          nJ_NUM: 0,
          xX_NUM: 0,
          dQ_NUM: 0,
          cQ_NUM: 1,
          cqdQ_NUM: 0,
          cqcQ_NUM: 0,
          bzbs: 0,
          bzrl: 0.0,
          xqrs: 0.0,
          mbxq: 0.0,
          gap1: 0.0,
          gap2: 0.0,
          cql: null,
          g: null
        },
        {
          organizatioN_TIER2: null,
          pU_NO: 'PU1',
          organizatioN_TIER3: "OTHERS",
          regioN_NAME: "QA",
          yD_NUM: 58,
          sD_NUM: 0,
          kG_NUM: 0,
          sJ_NUM: 0,
          qT_NUM: 0,
          bJ_NUM: 0,
          cJ_NUM: 0,
          nJ_NUM: 0,
          xX_NUM: 0,
          dQ_NUM: 0,
          cQ_NUM: 58,
          cqdQ_NUM: 0,
          cqcQ_NUM: 0,
          bzbs: 0,
          bzrl: 0.0,
          xqrs: 0.0,
          mbxq: 0.0,
          gap1: 0.0,
          gap2: 0.0,
          cql: null,
          g: null
        },
        {
          organizatioN_TIER2: null,
          pU_NO: 'PU1',
          organizatioN_TIER3: "OTHERS",
          regioN_NAME: "测试",
          yD_NUM: 56,
          sD_NUM: 0,
          kG_NUM: 0,
          sJ_NUM: 0,
          qT_NUM: 0,
          bJ_NUM: 0,
          cJ_NUM: 0,
          nJ_NUM: 0,
          xX_NUM: 0,
          dQ_NUM: 0,
          cQ_NUM: 56,
          cqdQ_NUM: 0,
          cqcQ_NUM: 0,
          bzbs: 0,
          bzrl: 0.0,
          xqrs: 0.0,
          mbxq: 0.0,
          gap1: 0.0,
          gap2: 0.0,
          cql: null,
          g: null
        },
        {
          organizatioN_TIER2: null,
          pU_NO: 'PU1',
          organizatioN_TIER3: "OTHERS",
          regioN_NAME: "IPQC",
          yD_NUM: 1,
          sD_NUM: 0,
          kG_NUM: 0,
          sJ_NUM: 0,
          qT_NUM: 0,
          bJ_NUM: 0,
          cJ_NUM: 0,
          nJ_NUM: 0,
          xX_NUM: 0,
          dQ_NUM: 0,
          cQ_NUM: 1,
          cqdQ_NUM: 0,
          cqcQ_NUM: 0,
          bzbs: 0,
          bzrl: 0.0,
          xqrs: 0.0,
          mbxq: 0.0,
          gap1: 0.0,
          gap2: 0.0,
          cql: null,
          g: null
        }
      ]
    };

    this.tableData=res.data
    this.getSpanArr(this.tableData)

  },
  methods: {
        getSpanArr(data) {
            // data就是我们从后台拿到的数据
            this.spanArr = []
            this.pos = 0
          for (var i = 0; i < data.length; i++) {
            if (i === 0) {
              this.spanArr.push(1);
              this.pos = 0;
            } else {
              // 判断当前元素与上一个元素是否相同
              if ( data[i].pU_NO === data[i - 1].pU_NO ) {
                this.spanArr[this.pos] += 1;
                this.spanArr.push(0);
              } else {
                this.spanArr.push(1);
                this.pos = i;
              }
              //||
              //  if (data[i].subName === data[i - 1].subName) {
              //   this.spanArr[this.pos] += 1;
              //   this.spanArr.push(0);
              // } else {
              //   this.spanArr.push(1);
              //   this.pos = i;
              // }

            }
            //  console.log('/////')
            //  console.log(this.spanArr);
            //  console.log('/////')

          }
        },
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
           if(
               columnIndex ===0 ||  columnIndex ===1
            ) {
              // columnIndex ===0 ||  columnIndex ===3
            const _row = this.spanArr[rowIndex];
            const _col = _row > 0 ? 1 : 0;
                return {
                        rowspan: _row,
                        colspan: _col
                };
            }
       },

  }
};
</script>

<style>
.chart-container {
  position: relative;
  width: 100%;
  height: calc(100vh - 84px);
}
</style>
